<template>
  <div id="top-bar" class="top-bar">
    <div class="left-blank">
      <iframe
        class="ifr-sty"
        _ngcontent-c18=""
        frameborder="0"
        src="https://i.tianqi.com/?c=code&amp;id=48&amp;color=%23FFFFFF&amp;py=changxing&amp;num=1"
      ></iframe>
      <div class="matic">
        <div class="matic-two">
          <div class="matic-two-line">生产管理</div>
        </div>
      </div>
    </div>
    <div class="center-blank">
      <div class="center-blank-line">
        <div class="line-dian">
          <div class="line-dian-one">
            <div class="diandian"></div>
          </div>
          <div class="line-dian-one">
            <div class="diandian"></div>
          </div>
          <div class="line-dian-one">
            <div class="diandian"></div>
          </div>
          <div class="line-dian-one">
            <div class="diandian"></div>
          </div>
          <div class="line-dian-one">
            <div class="diandian"></div>
          </div>
        </div>
        <div class="line-title">{{ topscreentitle }}</div>
        <div class="line-dian">
          <div class="line-dian-one">
            <div class="diandian"></div>
          </div>
          <div class="line-dian-one">
            <div class="diandian"></div>
          </div>
          <div class="line-dian-one">
            <div class="diandian"></div>
          </div>
          <div class="line-dian-one">
            <div class="diandian"></div>
          </div>
          <div class="line-dian-one">
            <div class="diandian"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-blank-view">
      <div class="matic">
        <div class="matic-two">
          <div class="matic-two-line">运营管理</div>
        </div>
      </div>
      <!-- <el-dropdown class="right-blank-line" trigger="click"> -->
      <div class="right-blank">
        <div class="line-mes">管理员，您好</div>
        <div class="line-ico">
          <img src="~@/assets/top-titles/rentou.png" />
        </div>
      </div>
      <!-- <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/login">
            <el-dropdown-item> 退出 </el-dropdown-item>
          </router-link>
        </el-dropdown-menu> -->
      <!-- </el-dropdown> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "TopTitleOne",
  props: {
    topscreentitle: {
      type: String,
      default: () => {
        return "城山沟大屏"
      }
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss">
    @import "~@/styles/variables.scss";
 .top-bar {
      position: absolute;
      z-index: 16;
      top: 0;
      left: 0;
      width: 100%;
      height: 70px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-content: flex-start;
      .left-blank {
        height: 63px;
        width: 330px;
        display: flex;
        justify-content: space-between;
        .ifr-sty {
          height: 49px;
          width: 250px;
        }
        .matic {
          width: 80px;
          height: 63px;
          margin-right: -10px;
          .matic-two {
            width: 76px;
            height: 25px;
            transform: skew(60deg);
            border: #005539 1px solid;
            color: $textColor;
            background-image: linear-gradient(#010d0d, #001f19, #014130);
            .matic-two-line {
              transform: skew(-60deg);
              width: 76px;
              height: 25px;
              text-align: center;
              line-height: 25px;
              white-space: nowrap;
              letter-spacing: 2px;
              font-size: 14px;
              cursor: pointer;
            }
            .matic-two-line:hover {
              font-weight: 600;
              font-size: 16px;
              color: #01fdc3;
            }
          }
        }
      }
      .center-blank {
        width: calc(100% - 575px);
        background-image: url('../../assets/top-titles/top-img.png');
        background-repeat: no-repeat;
        background-size: 100% 50px;
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
        height:70px;
        background-position-y: 0;
        min-height: 56px;
        .center-blank-line {
          color: #00ffc7;
          font-size: 36px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          //  background-color: #46d646;
          height: 42px;
          padding-bottom: 30px;

          .line-dian {
            font-size: 46px;
            font-weight: 600;
            // width: 30px;
            width: 126px;
            height: 21px;
            line-height: 21px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            // animation: diandianmove 6s infinite;
            overflow: hidden;
            justify-content: space-around;
            .line-dian-one {
              width: 33px;
              height: 21px;
              line-height: 21px;
              display: flex;
              align-items: center;
              justify-content: center;
              .diandian {
                width: 8px;
                height: 8px;
                border-radius: 100%;
                background-color: #00f8b1;
              }
            }
            @keyframes diandianmove {
              0% {
                width: 0px;
              }

              50% {
                width: 105px;
              }

              100% {
                width: 0px;
              }
            }
          }
          .line-title {
            font-size: 25px;
            white-space: nowrap;
            word-spacing: 4px;
          }
        }
      }
      .right-blank-view {
        height: 50px;
        width: 245px;
        color: #e2f5e2;
        display: flex;
        justify-content: space-between;
        .matic {
          width: 80px;
          height: 45px;
          margin-left: -7px;
          .matic-two {
            width: 80px;
            height: 25px;
            transform: skew(120deg);
            border: #005539 1px solid;
            color: $textColor;
            background-image: linear-gradient(#010d0d, #001f19, #014130);
            .matic-two-line {
              transform: skew(-120deg);
              width: 80px;
              height: 25px;
              text-align: center;
              line-height: 25px;
              white-space: nowrap;
              letter-spacing: 2px;
              font-size: 14px;
              cursor: pointer;
            }
            .matic-two-line:hover {
              font-weight: 600;
              font-size: 16px;
              color: #01fdc3;
            }
          }
        }
        .right-blank-line {
          height: 40px;
          width: 165px;
          color: #e2f5e2;
          font-size: 14px;
        }
      }
      .right-blank {
        height: 40px;
        width: 165px;
        color: #e2f5e2;
        font-size: 14px;
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        overflow: hidden;
        align-items: center;
        cursor: pointer;
        // background-color: #3a3d3a;
        .line-mes {
          width: 100px;
          // background: #e2f5e2;
        }
        .line-ico {
          img {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
</style>
